<template>
  <div id="app">
    <router-view />
    <!-- <div class="wraps">
      <el-form
        label-width="100px"
        :model="formLabelAlign"
        style="max-width: 460px"
      >
        <el-form-item label="账号">
          <el-input v-model="formLabelAlign.name" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="formLabelAlign.password" />
        </el-form-item>
        <el-form-item label="验证码">
          <div style="display: flex">
            <el-input v-model="formLabelAlign.code" />
            <img @click="fetchImage" :src="imageUrl" alt="" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button @click="submit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="width:1000px;height:400px">
      <div>
        <el-input v-model="search.keyWord" style="width: 300px"></el-input>
        <el-button @click="init" style="margin-left: 10px">搜索</el-button>
        <el-button @click="openDialog" type="primary" style="margin-left: 10px">添加</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">

        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="password" label="密码"> </el-table-column>
                <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
      </el-table>
    </div> -->
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      search: "",
      localCount: 2,
      total: 0,
      formLabelAlign: {},
      imageUrl: "", // 初始化为空
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      changeSize: [10, 20],
      form: {},
      dialogVisible: false,
    };
  },
  created() {
    // this.fetchImage();
    // this.getTableData()
  },

  computed: {},
  methods: {
    getTableData(){
      axios.get("/api/user/shopList",{params:{page: "1",pageSize:'10'}}).then((res) =>{
        this.tableData = res.data.data.data
      })
    },
    edit() {},
    deleteRow() {},
    close() {},
    save() {},
    init() {},
    openDialog() {},
    fetchImage() {
      // 调用接口获取图片地址
      // 例如使用axios库发送HTTP请求
      axios
        .get("/api/user/code", { responseType: "arraybuffer" })
        .then((response) => {
          const blob = new Blob([response.data], { type: "image/svg+xml" });
          this.imageUrl = URL.createObjectURL(blob); // 将图像数据转换为URL，并赋值给captchaImageUrl变量
        })
        .catch((error) => {
          console.error("获取验证码失败", error);
        });
    },
    submit() {
      fetch("/api/user/create", {
        method: "POST",
        body: JSON.stringify(this.formLabelAlign),
        headers: {
          "content-type": "application/json",
        },
      }).then((res) => res.json());
    },
  },
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
}

/* .wraps {
  display: flex;
  justify-content: center;
  align-items: center;
  height: inherit;
}

html,
body,
#app {
  height: 100%;
} */
</style>
